<template>
	<view>
    <navbar top="80rpx"></navbar>
		<view class="header">
			<view class="header-container">
				<view class="tab-list dis-flex">
					<view v-for="(item,index) in tab.list" :key="item.type"
						:class="'tab' + (item.type == tab.current ? ' active' : '')"
						@tap.stop.prevent="toggleTab(item.type)">
						{{ item.title }}
					</view>
				</view>
			</view>
			<view class="header-placeholder"></view>
		</view>
		<view v-if="0 < record.list.length" class="record-list">
			<view v-for="item in record.list" :key="item.log_id" class="record">
				<view class="dis-flex flex-x-between flex-y-center f-28">
					<view>{{ item.scene.text }}</view>
					<view class="f-bold">{{ item.money }}</view>
				</view>
				<view class="m-top20 dis-flex flex-x-between flex-y-center f-22">
					<view class="col-9">{{ item.create_time }}</view>
					<view class="col-9">余额：{{ item.balance }}</view>
				</view>
			</view>
		</view>
    <!-- 没有记录 -->
    <view v-if="0 == record.list.length && !record.loading" class="yoshop-notcont">
      <text class="iconfont icon-wushuju"></text>
      <text class="cont">暂无账单明细哦</text>
    </view>
	</view>
</template>

<script>
	const app = getApp();
  import navbar from "@/components/navbar/navbar";
	export default {
    components: {
      navbar
    },
		data() {
			return {
				tab: {
					list: [{
						title: '全部',
						type: '0'
					}, {
						title: '支出',
						type: '20'
					}, {
						title: '收入',
						type: '10'
					}],
					current: '0'
				},
				record: {
					page: 1,
					loading: true,
					hasMore: false,
					list: []
				},
			}
		},
		onLoad() {
			this.requestData();
		},
		onPullDownRefresh() {
			this.record.page = 1;
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (this.record.hasMore && !this.record.loading) {
				this.requestData();
			}
		},
		methods: {
			toggleTab(type) {
				if (type != this.tab.current) {
					this.tab.current = type;
					this.record.page = 1;
					this.requestData();
				}
			},
			requestData(callback) {
				this.record.loading = true;
				uni.showLoading();
				app._get('balance.log/lists', {
					page: this.record.page,
					type: this.tab.current
				}, (res) => {
					let {
						data,
						total
					} = res.data.list;
					let {
						page,
						list,
						hasMore
					} = this.record;
					if (1 == page) {
						list.length = 0;
					}
					list = [...list, ...data];
					hasMore = total > list.length;
					if (hasMore) {
						page++;
					}
					this.record.page = page;
					this.record.list = list;
					this.record.hasMore = hasMore;
				}, null, () => {
					this.record.loading = false;
					uni.hideLoading();
					callback && callback();
				})
			},
		}
	}
</script>
<style lang="scss">
  page,
  body {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
	.header .header-container {
		width: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.header .header-placeholder {
		height: 80rpx;
	}

	.header .tab-list {
		width: 100%;
		background: #fff;
		padding-left: 10rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.header .tab {
		height: 80rpx;
		padding: 0 30rpx;
		line-height: 80rpx;
		position: relative;
		font-size: 28rpx;
		color: #666;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	.header .tab.active {
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-text-color;
	}

	.header .tab.active:after {
		content: "";
		width: 56rpx;
		height: 4rpx;
		background: $uni-bg-color;
		border-radius: 2rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.record-list {
		padding: 0 20rpx;
	}

	.record {
		padding: 40rpx 20rpx;
	}

	.record:nth-child(n+2) {
		border-top: 1px solid #f9f9f9;
	}
</style>
